import Guide from '~/components/layout/guide'
import Snippet from '~/components/snippet'
import { InlineCode } from '~/components/text/code'
import { Image } from '~/components/media'
import Caption from '~/components/text/caption'
import Note from '~/components/text/note'
import Link from '~/components/text/link'
import Card from '~/components/card'
import { Code } from '~/components/code'
import DeploySection from '~/components/guides/deploy-section'

export const meta = {
  title: 'Deploy a Next.js and FaunaDB-Powered Guestbook with ZEIT Now',
  description:
    'Create a Next.js and FaunaDB-Powered Guestbook App and deploy it with ZEIT Now.',
  published: '2019-11-19T17:00:00.000Z',
  authors: ['msweeneydev'],
  url: '/guides/deploying-a-faunadb-powered-guestbook-with-zeit-now',
  name: 'Next.js + MongoDB',
  type: 'project',
  image:
    'https://og-image.now.sh/**Deploy%20a%20FaunaDB-Powered%20Next.js%20app**%20%3Cbr%2F%3E%20with%20ZEIT%20Now.png?theme=light&md=1&fontSize=70px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg&images=https%3A%2F%2Fseeklogo.com%2Fimages%2FN%2Fnext-js-logo-7929BCD36F-seeklogo.com.png&images=https%3A%2F%2Fres-3.cloudinary.com%2Fcrunchbase-production%2Fimage%2Fupload%2Fc_lpad%2Ch_256%2Cw_256%2Cf_auto%2Cq_auto%3Aeco%2Fywnzi0pt0uw9klatmadc',
  editUrl:
    'pages/guides/deploying-a-faunadb-powered-guestbook-with-zeit-now.mdx',
  lastEdited: '2020-02-04T12:49:00.000Z'
}

With the release of [`create-next-app`](https://nextjs.org/blog/create-next-app), bootstrapping [Next.js](https://nextjs.org/) apps is now a guided process that allows you to get up and running in seconds by using ready-made examples.

This guide walks you through creating a Next.js guestbook app that receives data from a [GraphQL](https://graphql.org/) API powered by [FaunaDB](https://fauna.com/), and how to deploy it with ZEIT Now.

## Step 1: Creating a FaunaDB Database

From the [FaunaDB dashboard](https://dashboard.fauna.com/), create a [new database](https://dashboard.fauna.com/db-new/), providing a name of your choosing.

Once created, select the [Security tab](https://dashboard.fauna.com/keys/@db/dada) and create a new key with the following details:

- Database: `zeit`
- Role: `Admin`
- Key Name: `secret-key`

Make a note of the secret when it is shown as you will need this for Step 2.

## Step 2: Set Up Your Next.js App

Set up your bootstrapped Next.js app with [`npx`](https://www.npmjs.com/package/npx) and move into the project directory:

<Snippet dark text="npx create-next-app --example with-graphql-faunadb my-nextjs-guestbook && cd my-nextjs-guestbook" />
<Caption>Initializing a Next.js, GraphQL, and FaunaDB app with <Link href="https://www.npmjs.com/package/npx">npx</Link> and moving into the project directory.</Caption>

By including the `with-graphql-faunadb` argument, `create-next-app` bootstraps an app based off of a template found in the [Next.js examples repository](https://github.com/zeit/next.js/tree/canary/examples).

Install the project dependencies:

<Snippet dark text="npm i" />
<Caption>Installing the dependencies for your project with <Link href="https://www.npmjs.com">npm</Link>.</Caption>

Then, start the setup script, providing your FaunaDB secret obtained in [Step 1](#step-1-creating-a-faunadb-database) when prompted:

<Snippet dark text="npm run setup" />
<Caption>Running the setup script provided for your project.</Caption>

This script achieves the following:

- Uploads the GraphQL schema
- Creates a role that can only access your guestbook entries
- Creates a key on that role
- Returns a key for you to paste in the `next.config.js`

Next, add the key returned by the setup script to your `next.config.js` file by replacing the value for the `faunaDbSecret` property with the key created by the script.

## Step 3: Deploying Your App with ZEIT Now

<DeploySection meta={meta} />

## Bonus: Exploring the App

The app features a working Guestbook SPA with GraphQL support, connected to an example FaunaDB database.

<Note type="success" label="hint">
  FaunaDB provides support for importing GraphQL schemas, you can read more
  about this in the{' '}
  <Link href="https://docs.fauna.com/fauna/current/start/graphql#import">
    FaunaDB documentation
  </Link>
  .
</Note>

By importing a GraphQL schema into your database, you gain access to FaunaDB’s versatile GraphQL endpoint. This endpoint automatically resolves GraphQL queries and mutations.

The GraphQL import process generates the requisite **Collections**, **Indexes**, and **resolvers** expected of your schema. FaunaDB also generates CRUD mutations for each GraphQL object.

All of the components for the app are found in the `/components` directory. Meanwhile, the CSS is in JavaScript and located in the `/styles` directory, this is automatically vendor-prefixed when necessary.

In `graphql/api.js`, you will find two GraphQL requests that correspond to a query and a single mutation. These methods fetch guestbook entries and create new ones, respectively.

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
